웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
ES 2015(ES 6)에서 새롭게 추가된 모듈(module) import, export에 대하여 알아봅니다.
ES 6에서의 큰 변화 중 하나가 바로 Module 방식의 export, import가 추가된 사항입니다. 사실 이 전까지의 자바스크립트는 실질적인 모듈이 지원되지는 않았습니다. 하지만!! ES 6부터 export, import를 사용하는 방법이 가능하므로 큰 변화중 하나입니다. 이 중에서 export는 모듈을 추가, 등록하는 방법이고 import는 추가된 모듈을 사용할 수 있게 해줍니다.
export // 모듈을 외부로 내보는데 사용
import // 외부에서 모듈을 가져오는 데 사용
그럼 모듈을 등록하고 내보낼 수 있는 export 부터 알아봅니다.
# ES6 export 알아보기, 모듈 등록하고 내보내기
명령어 export는 모듈을 등록할 수 있는 키워드입니다. 이를 사용해 하나의 모듈을 만들 수 있으며 다른 스크립트에서는 import를 사용하여 모듈 방식으로 불러와 사용할 수 있도록 해줍니다.@ export로 내보낼 수 있는 데이터 타입
이때 내보낼 수 있는 데이터 타입은 원시값, 함수, 클래스, 객체 등을 사용할 수 있습니다.(클래스 역시 ES 6에 추가 됨) 그럼 간단한 코드를 작성해보겠습니다.
export let test = 123;
export function doSomething() { ... };
export { myName: 'Tom', doSomething: function() { ... } };
export function doSomething() { ... };
export { myName: 'Tom', doSomething: function() { ... } };
이처럼 export를 하는 경우 크게 두 가지 방식으로 나눌 수 있는데 이름을 사용하는 방식 그리고 사용하지 않는 방식으로 구분할 수 있습니다. 이는 다른 표현으로 사용할 수 있는데 default를 사용하는 방식과 아닌 방식입니다.
아래의 두 코드가 어떻게 쓰였는지 봐주세요.
@ test.js
export let test = 123;
// default 없이 이름으로 모듈을 선언
// default 없이 이름으로 모듈을 선언
@ test2.js
export default let test = 123;
// deafult를 사용
// deafult를 사용
큰 차이는 없으나 이름을 사용하는 경우인 위의 방식에서는 여러개의 값들을 하나의 모듈에서 export 할 수 있습니다. 하지만 아래와 같이 default를 사용하는 경우 하나의 모듈, 파일 단위로 하나의 export만 가능합니다. 그 이유는 export default는 이름을 사용하지 않았기 때문에 import할 때 아무 이름이나 붙여서 사용할 수 있기 때문입니다.
참고로 default를 사용하는 방법이 많이 사용됩니다. 가장 큰 이유는 하나의 파일에 하나의 모듈을 사용하는 것이 복잡도를 낮추고 더 사용하기 쉽기 때문입니다.
다음으로 import를 알아봅니다.
# ES 6 import 알아보기
다음은 import에 대하여 알아봅니다. import가 하는 일은 위의 코드처럼 export한 모듈을 불러와 사용할 수 있도록 해줍니다. import는 export 보다 간단하며 아래와 같이 사용할 수 있습니다.import 모듈이름 from '파일이름'
여기서 파일위치는 현재 위치를 기준으로 해당 모듈 파일의 위치를 입력하면 됩니다. 그리고 모듈 이름은 export된 이름이 되겠습니다. 위에 잠깐 언급했지만 만약 export default로 된 경우 아무 이름으나 등록해 사용할 수 있으니 참고하세요. 그럼 실제로 import를 수행하는 간단한 예제를 만들어보겠습니다.
! import 예제보기
먼저 export된 모듈이 필요하므로 하나 만듭니다.@ userLib.js
const myName = 'Tom';
export myName;
export myName;
이처럼 내보낼 값을 미리 선언하여 많이 사용됩니다. 그럼 다음은 이제 import해서 콘솔에 출력하겠습니다.
import myName from './userLib.js'
console.log(myName);
console.log(myName);
이처럼 간단하게 export, import를 사용할 수 있습니다.
참고로 모듈을 만들고 추가하거나 가져오는 방법은 ES 6의 export, import 방법 이외에도 nodejs의 require() 등 다른 방법도 있습니다.
# 자바스크립트 모듈을 실행 관련
ES 6에서 모듈을 사용할 경우 import 되는 파일을 mjs로 사용할 수 있습니다. 물론 js 파일도 상관없이 가능하지만 가급적 하나로 통일하는 것이 좋겠습니다.또한 <script>를 사용할 때 추가적으로 어트리뷰트에 type="module" 사용해야 합니다.
<script type="module" src="./components/lib/test.js"></script>
또한 모듈을 사용할 경우 웹서버 환경에서 동작해야 CORS 에러가 발생하지 않습니다. 반드시 웹서버 환경에서 사용해야합니다.
아래의 글도 찾고 계시지 않나요?
